<template>
<div class="HistoryHot-container">
  <!-- 历史记录部分 -->
  <div class="history" v-show="isShow">
    <!-- 上半部分 -->
    <div class="hd">
      <h4>历史记录</h4>
      <van-icon name="delete-o" @click="deleteHistory"/>
    </div>
    <!-- 下半部分 tag标签-->
    <div class="bd">
      <van-tag plain type="default"
      v-for="(item,indedx) in historydataList"
      :key="indedx"
      @click="tagClick(item)"
      >{{item}}</van-tag>
    </div>
  </div>
  <!-- 热门搜索部分 -->
  <div class="history">
    <!-- 上半部分 -->
    <div class="hd">
      <h4>热门搜索</h4>
    </div>
    <!-- 下半部分 tag标签-->
    <div class="bd">
      <van-tag plain type="default"
      v-for="(item,index) in hotdataList" :key="index"
      :class="item.is_hot===1?'red':''"
      @click="tagClick(item.keyword)"
      >{{item.keyword}}</van-tag>
    </div>
  </div>
</div>
</template>

<script>
import { ClearHistory } from '@/request/api.js'
export default {
  props: ['historydataList', 'hotdataList'],
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    tagClick(tagval) {
      // console.log(tagval)
      this.$emit('tagClick', tagval)
    },
    deleteHistory() {
      ClearHistory().then((res) => {
        // console.log(res)
        if (res.errno === 0) {
          this.$toast('删除成功')
          setTimeout(() => {
            this.isShow = false
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="less">
  .history{
    background-color: #fff;
    padding: .125rem;
    margin-bottom: .125rem;
    .hd{
      font-size: .20rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: .1rem;
    }

  }
      .van-tag{
      margin-right: .075rem;
      margin-top: .0625rem;
             .red{
      color: red !important;;
    }
    }

</style>
